<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="../src/react.js"></script>
    <script src="../src/react-dom.js"></script>
    <script src="../src/babel.js"></script>
    <script type="text/babel">

        class Onec extends React.Component{
            constructor(){
                super()
                this.state = {
                   list:[
                    {name:'胡桃',age:18,id:1111},
                    {name:'雷电将军',age:19,id:1114},
                    {name:'钟离',age:25,id:1112},
                    {name:'枫原万叶',age:18,id:1113},
                    
                ],
                   name:'',
                   age:'',
                    editId:null,
                    flag:true
                }
            }
            coc = (e)=>{
                // console.log('---');
                this.setState({
                    [e.target.name]:e.target.value
                })
            }
            submit =()=>{
                // console.log(this.state.name,this.state.age);
                let list= JSON.parse( JSON.stringify(this.state.list))
                let n = {name:this.state.name,age:this.state.age,id:+new Date()}
                list.push(n)
                this.setState({
                    list:list
                })
                this.state.name = ''
                this.state.age = ''
            }
            del =(id)=>{
                // console.log(this.state.name,this.state.age);
                let list= JSON.parse( JSON.stringify(this.state.list))
                let index = list.findIndex((e,i)=>e.id == id)
                list.splice(index,1)
                this.setState({
                    list:list
                })
            }
            edit =(id)=>{
                let list = JSON.parse(JSON.stringify(this.state.list))
                let obj = list.find((e,i)=>e.id == id)
                this.setState({
                    name:obj.name,
                    age:obj.age,
                    editId:obj.id,
                    flag:false
                })
               
            }
            editBtn=()=>{
                let list =  JSON.parse( JSON.stringify(this.state.list));
                let index = list.findIndex(v=>v.id == this.state.editId);
                list[index].name= this.state.name;
                list[index].age= this.state.age;

                this.setState({
                        list:list,
                        flag:true
                })
                this.state.name = ''
                this.state.age = ''
            }
            render(){
                // console.log('-----render');
                
                return (
                    <div>
                       <p><input type="text" value={this.state.name} name="name" onChange={this.coc} /></p> 
                        <p><input type="text" value={this.state.age} name="age" onChange={this.coc} /></p>
                        {this.state.flag?<p><button onClick={()=>this.submit()}>提交</button></p>:<p><button onClick={()=>this.editBtn()}>修改</button></p>}
                        <table width="400px">
                            <thead>
                                <tr >
                                    <th>name</th>
                                    <th>age</th>
                                    <th>del</th>
                                </tr>  
                            </thead>
                            <tbody align="center">
                               {
                                    this.state.list.length >0 ?this.state.list.map((item,index)=>{
                                        return (
                                            <tr key={item.id}>
                                                <td>{item.name}</td>
                                                <td>{item.age}</td>
                                                <td>
                                                    <button onClick={()=>this.del(item.id)}>del</button>
                                                    <button onClick={()=>this.edit(item.id)}>edit</button>
                                                </td>
                                                
                                            </tr>
                                        )
                                    }): <tr><th colSpan="3">暂无数据</th></tr>
                               }
                            </tbody>
                                
                        </table>
                        
                    </div>)
            }
        }
        let element = (
            <div>
                <Onec></Onec>    
            </div>
        )

        ReactDOM.render(
            element,
            document.getElementById("app")
        )

    </script>
</body>

</html>